<template>
    <div class="banner">
      <div class="ban-img" >
       <img @click="handleGallaryClick()" src="//img1.qunarzz.com/sight/p0/1712/71/71ace1aa7d971212a3.water.jpg_600x330_5ff0b4e8.jpg" alt="">
        <router-link tag="div" to="/" class="ban-icon1"><span class="iconfont icon-fanhui"></span></router-link>
        <div class="ban-name">渔阳滑雪场(AAA景区)</div>
        <div class="ban-icon2"><span class="iconfont icon-tupian"></span><em>32</em></div>
      </div>
      <common-gay :imgs="imgs" v-show="showGallary" @closeSwiper="handleDetailClose"></common-gay>
    </div>
</template>
<script>
  import CommonGay from '@/Common/Gallary/Gallary'
    export default {
        name: "Banner",
        components : {
           CommonGay
        },
        data (){
          return {
            showGallary : false,
            imgs:[
              {id:"0001",src:"http://img1.qunarzz.com/sight/p0/1712/71/71ace1aa7d971212a3.water.jpg_r_800x800_21de08f4.jpg"},
              {id:"0002",src:"http://img1.qunarzz.com/sight/p0/1711/bb/bb8e3bda7b9cfbf9a3.water.jpg_r_800x800_ffe8307b.jpg"}
              ]
          }
        },
        methods :{
          handleGallaryClick () {
            this.showGallary=true;
          },
          handleDetailClose (){
            this.showGallary=false;
          }
        }
    }
</script>
<style lang="stylus" scoped>
  .banner{
     .ban-img{
        position:relative;
        img{
          width: 100%
        }
       .ban-name{
         position absolute
         bottom:.1rem;
         left:.1rem;
         color:white;
         text-shadow: 0 1px 2px rgba(0,0,0,0.70);
       }
       .ban-icon1{
         width:.3rem;
         height:.3rem;
         border-radius :50%;
         background-color :black;
         position absolute
         top:.1rem;
         left:.1rem;
         text-align:center;
         opacity .5;
         .iconfont{
           color:#fff;
           line-height :.3rem;
           font-size:.18rem;

         }
       }
       .ban-icon2{
         position: absolute;
         left:.1rem;
         bottom:.36rem;
         color:#fff;
         font-size:.12rem;
         width: .6rem;
         height:.2rem;
         background-color black
         border-radius :.1rem;
         opacity .6;
         text-align center
         line-height .2rem;
         span{
           font-size:.12rem;
           margin-right:.05rem;
         }
       }
     }
  }
</style>
